<script setup>
import { ref,computed } from 'vue'
import { Sticky, Overlay, DatePicker, Popup } from 'vant'
import { Selection, Input } from '@/components/common/index'
import { arrayToTime, timeToArray } from '@/utils/time.js'
import { useRouter } from 'vue-router'
import { enumStore } from '@/store/enum'
import { storeToRefs } from 'pinia'
import Utility from '@/utils/utility'
const enum_store = enumStore()
const { enumDslInfo } = storeToRefs(enum_store)
const router = useRouter()
const show = ref(false) // 是否显示筛选框
const showTime = ref(false) // 是否显示日期选择
const currentDate = ref(Utility.getDateTime().split('-')) // 选中的日期
let dateType = 'start'
// 筛选数据
const filterInfo = ref({
  currency: '',
  whetherShip: '',
  contractStatusList: '',
  gmtCreateStart: null,
  gmtCreateEnd: null,
  keyword: '',
})

const emit = defineEmits(['search'])

// 格式化日期选择 数据
function formatter(type, option) {
  if (type === 'year') {
    option.text += '年'
  }
  if (type === 'month') {
    option.text += '月'
  }
  if (type === 'day') {
    option.text += '日'
  }
  return option
}

function hanldeTimeClick(type) {
  dateType = type
  if (dateType === 'start') {
    if (filterInfo.value.gmtCreateStart) {
      currentDate.value = timeToArray(filterInfo.value.gmtCreateStart)
    }
  } else {
    if (filterInfo.value.gmtCreateEnd) {
      currentDate.value = timeToArray(filterInfo.value.gmtCreateEnd)
    }
  }
  showTime.value = true
}

function hanldeDateConfirm({ selectedValues }) {
  if (dateType === 'start') {
    filterInfo.value.gmtCreateStart = arrayToTime(selectedValues)
  } else {
    filterInfo.value.gmtCreateEnd = arrayToTime(selectedValues)
  }
  showTime.value = false
}

function hanldeReset() {
  filterInfo.value = {
    currency: '',
    whetherShip: '',
    contractStatusList: '',
    gmtCreateStart: null,
    gmtCreateEnd: null,
    keyword: '',
  }
}

function handleConfirm() {
  if (filterInfo.value.contractStatusList) {
    emit('search', {
      ...filterInfo.value,
      contractStatusList: [filterInfo.value.contractStatusList],
    })
  } else {
    emit('search', { ...filterInfo.value, contractStatusList: [] })
  }
  show.value = false
}
const handleStatusRepeat = (list) => {
  let statusList = []
  list.forEach((v) => {
    if (statusList.length) {
      let _index = statusList.findIndex((_) => _.label === v.label)
      if (_index > -1) {
        statusList[_index].value = statusList[_index].value + ',' + v.value
      } else {
        statusList.push(v)
      }
    } else {
      statusList.push(v)
    }
  })
  console.log(statusList,'statusList')
  return statusList
}
const ContractOrderStatusList = computed(() => {
  if (
    enumDslInfo.value.ContractOrderStatus &&
    enumDslInfo.value.ContractOrderStatus.length
  ) {
    return handleStatusRepeat(enumDslInfo.value.ContractOrderStatus)
  } else {
    return []
  }
})
</script>

<template>
  <Sticky :offset-top="46">
    <div class="search-nav">
      <button class="filter-btn fz-14" @click="show = true">
        <i class="iconfont icon-shaixuanicon"></i>
        筛选
      </button>
      <button class="create-btn fz-12" @click="router.push(`/contract/create`)">
        <i class="iconfont icon-tianjiaicon1"></i>
        创建合同订单
      </button>
    </div>
  </Sticky>
  <!-- 筛选项 -->
  <Overlay :show="show" z-index="99">
    <div class="filter-box">
      <i class="iconfont icon-danchuangguanbiicon" @click="show = false"></i>
      <div class="filter-box-title">筛选</div>
      <div class="select-title fz-14">创建时间</div>
      <div class="time-box">
        <Selection
          disabled
          just-show
          :placeholder="filterInfo.gmtCreateStart || '开始时间'"
          @cover-click="hanldeTimeClick('start')"
        />
        <span class="line"></span>
        <Selection
          disabled
          just-show
          :placeholder="filterInfo.gmtCreateEnd || '结束时间'"
          @cover-click="hanldeTimeClick('end')"
        />
      </div>
      <div class="select-title fz-14">发货状态</div>
      <Selection
        v-model:value="filterInfo.whetherShip"
        :list="enumDslInfo.WhetherShip"
      />
      <div class="select-title fz-14">合同状态</div>
      <Selection
        v-model:value="filterInfo.contractStatusList" 
        :list="ContractOrderStatusList"
      />
      <div class="select-title fz-14">币种</div>
      <Selection
        v-model:value="filterInfo.currency"
        :list="enumDslInfo.CurrencyType"
      />
      <div class="select-title fz-14">关键词</div>
      <Input
        v-model:value="filterInfo.keyword"
        placeholder="合同编号/买家名称"
      />
      <div class="control-box">
        <button @click="hanldeReset">重置</button>
        <button @click="handleConfirm">确认</button>
      </div>
    </div>
  </Overlay>
  <!-- 日期选择 -->
  <Popup v-model:show="showTime" round position="bottom">
    <date-picker
      v-model="currentDate"
      :formatter="formatter"
      @confirm="hanldeDateConfirm"
      title="选择日期"
      @cancel="showTime=false"
    /> 
  </Popup>
</template>

<style scoped lang="scss">
.search-nav {
  @include fh;
  justify-content: space-between;
  height: 0.4rem;
  padding: 0 0.12rem;
  background: #fff;
  button {
    background: inherit;
    border: none;
  }
  .filter-btn {
    color: #222;
  }
  .create-btn {
    color: #3f84f3;
    background: #eaf2ff;
    border-radius: 0.14rem;
    padding: 0.06rem 0.08rem;
    i {
      font-size: 0.12rem;
    }
  }
}
.filter-box {
  position: absolute;
  top: 0.5rem;
  left: 0;
  right: 0;
  border-radius: 0.04rem;
  margin: 0 auto;
  width: 3.25rem;
  background: #fff;
  padding: 0.15rem 0.12rem 0.25rem;
  .icon-danchuangguanbiicon {
    position: absolute;
    right: 0.1rem;
    top: 0.1rem;
    font-size: 0.2rem;
  }
  &-title {
    text-align: center;
  }
  .select-title {
    margin: 0.16rem 0 0.1rem;
    color: #222;
  }
  .time-box {
    @include fh;
    .select-box {
      width: 1.3rem;
    }
    .line {
      @include wh(0.17rem, 1px);
      background: #cccccc;
      margin: 0 0.08rem;
    }
  }
  .control-box {
    @include fh;
    justify-content: space-between;
    margin-top: 0.3rem;
    button {
      @include wh(1.35rem, 0.4rem);
      border-radius: 0.2rem;
      border: none;
    }
    button:nth-of-type(1) {
      background: #f4f4f4;
      color: #666666;
    }
    button:nth-of-type(2) {
      background: #3f84f3;
      color: #fff;
    }
  }
}
</style>
